<template>
<div class="administer">
        <div class="administerNav">
            <backHeader></backHeader>
        </div>
        <div class="administerCont">
       
    <div class="product html_pst">
      <div class="searchBoxs">
          <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="品牌名称">
              <el-select v-model="request.brandId">
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="item in lampBrandList" :key="item.id" :label="item.brandName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系列名称">
              <el-input v-model="request.seriesNameLike"></el-input>
            </el-form-item>
            <el-form-item label="灯具类型">
              <el-select v-model="request.lumType">
                <el-option label="全部" value=""></el-option>
                <el-option v-for="item in lampTypeList" :key="item.id" :label="item.lampName" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search(1)">查询</el-button>
            </el-form-item>
          </el-form>
      </div>
      <div class="roleControl managementProductList">
            <ul>
                <li @click="showAddModel"><i class="el-icon-circle-plus-outline"></i>添加</li>
                <li @click="showEditModel"><img src="@/assets/images/bb3.jpg" alt="">修改</li> 
                <li @click="showDeleteModel"><img src="@/assets/images/bb4.jpg" alt="">删除</li>
                <li @click="gotoProduct"><i class="el-icon-copy-document"></i>产品信息维护</li>
            </ul>
             <el-table
                :data="tableData"
                @row-click="clickRow"
                highlight-current-row
                border
                style="width: 100%"
                :max-height="tableHeight">                                                                                    
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="brandName" label="品牌名称"></el-table-column>
                <el-table-column prop="seriesName" label="系列名称"></el-table-column>
                <el-table-column prop="lumTypeStr" label=" 灯具类型"></el-table-column>
                
                <el-table-column prop="" label=" 宣传图1">
                  <template slot-scope="scope">
                    <div class="managementProductList_btn">
                      <img :src="ImgPath + scope.row.seriesPic1" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="宣传图2">
                  <template slot-scope="scope">
                    <div class="managementProductList_btn">
                      <img :src="ImgPath + scope.row.seriesPic2" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="" label=" 宣传图3">
                  <template slot-scope="scope">
                    <div class="managementProductList_btn">
                      <img :src="ImgPath + scope.row.seriesPic3" alt="">
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="系列简介">
                   <template slot-scope="scope">
                                <el-popover placement="top" trigger="hover"  width="400">
                                    {{ scope.row.seriesBrief }}
                                    <div slot="reference"><span id="wenzi">{{ scope.row.seriesBrief }}</span></div>
                                </el-popover>
                                </template>
                </el-table-column>
            </el-table>
            <div style="padding:10px;text-align:center">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[20, 50, 100, 200]"
                            :page-size="20"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="totalCount">
                        </el-pagination>
                    </div>
        </div>
    </div>
     </div>
     <el-dialog  :title="modelTitle" :visible.sync="newbrand"  width="620px" custom-class="newbrand pop-up"  v-dialogDrag>
        <el-form :inline="true" class="demo-form-inline" label-width="100px">
          <div class="conr">
            <div class="lt">
                 <el-form-item label="系列名称：" :rules="[{required: true}]">
                  <el-input v-model="form.seriesName"></el-input>
              </el-form-item>
              <el-form-item label="所属品牌：" :rules="[{required: true}]">
                  <el-select v-model="form.brandId">
                      <el-option v-for="item in lampBrandList" :key="item.id" :label="item.brandName" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="灯具类型：">
                  <el-select clearable  v-model="form.lumType">
                      <el-option v-for="item in lampTypeList" :key="item.id" :label="item.lampName" :value="item.id"></el-option>
                  </el-select>
              </el-form-item>
            </div>
            <div class="rt">
               
               <el-form-item label="宣传图1：" class="sce" :rules="[{required: true}]">
                    <template>
                                            <div style="clear:both;"></div>
                                            <div v-if="form.seriesPic1" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.seriesPic1" alt="" style="width:98px;height:100px;float:left;margin-bottom:22px;max-width:98px !important">
                                                <span class="el-upload-list__item-actions" style="width:98px;height:100px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic1Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess1" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>


                    </template>
                </el-form-item>
                <el-form-item label="宣传图2：" class="sce">
                    <template>
                        <div style="clear:both;"></div>
                                            <div v-if="form.seriesPic2" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.seriesPic2" alt="" style="width:98px;height:100px;float:left;margin-bottom:22px;max-width:98px !important">
                                                <span class="el-upload-list__item-actions" style="width:98px;height:100px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic2Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess2" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                    </template>
                </el-form-item>
                <el-form-item label="宣传图3：" class="sce">
                    <template>
                        <div style="clear:both;"></div>
                                            <div v-if="form.seriesPic3" class="el-upload-list--picture-card avatar-uploader" >
                                                <img class="el-upload-list__item-thumbnail avatar" :src="ImgPath +  form.seriesPic3" alt="" style="width:98px;height:100px;float:left;margin-bottom:22px;max-width:98px !important">
                                                <span class="el-upload-list__item-actions" style="width:98px;height:100px">
                                                    <span
                                                    class="el-upload-list__item-delete"
                                                    @click="brandpic3Remove()">
                                                    <i class="el-icon-delete"></i>
                                                    </span>
                                                </span>
                                            </div>
                                            
                                            <el-upload v-else class="avatar-uploader" 
                                                :action="uploadUrl" 
                                                :show-file-list="false" 
                                                :headers ="headers"
                                                :on-success="handleAvatarSuccess3" 
                                                :before-upload="beforeAvatarUpload">
                                                <i class="el-icon-plus avatar-uploader-icon"></i>
                                            </el-upload>
                                            <div style="clear:both;"></div>
                    </template>
                </el-form-item>
            </div>
            <div class="rt_lt">
               <el-form-item label="系列简介：">
                <el-input type="textarea" v-model="form.seriesBrief" :rows="7" maxlength="200"
  show-word-limit></el-input>
              </el-form-item>
            </div>   
          </div> 
              <el-form-item class="botm">
                  <el-button @click="cancel()">取消</el-button>
                  <el-button v-if="form.id > 0" type="primary" @click="edit()">确定</el-button>  
                  <el-button v-else type="primary" @click="save()">确定</el-button>  
              </el-form-item>
          </el-form>
    </el-dialog>
    </div>
</template>
<script>
import backHeader from '@/views/common/backHeader.vue'
export default {
    data() {
      return {
        request:{
          brandId:'',
          lumType:'',
          page:1,
          rows:20
        },
        lampBrandList:[],
        seriesList:[],
        lampTypeList:[],
        tableData:[],
        totalCount:0,
        tableHeight:200,
        newbrand:false,
        form:{
          lumType:'',
          seriesPic1:'',
          seriesPic2:'',
          seriesPic3:''
        },
        headers: {
          "Authorization": localStorage.getItem('token')
        },
        uploadUrl:'',
        currentEditRow:{},
        modelTitle:'新增系列信息'
      }
    },
    methods: {
      cancel(){
        this.newbrand = false
      },
      gotoProduct(){
        if(this.currentEditRow != null && this.currentEditRow.id != null && this.currentEditRow.id > 0){
          this.$router.push('/maintenance?id='+this.currentEditRow.id+"&lumTypeId="+this.currentEditRow.lumType)
        }else{
          this.$message.error("请先选择一条数据！")
        }
      },
      clickRow(item){
        this.currentEditRow = item
        console.log(item)
      },
      brandpic1Remove(){
        this.form.seriesPic1 = ''
      },
      brandpic2Remove(){
        this.form.seriesPic2 = ''
      },
      brandpic3Remove(){
        this.form.seriesPic3 = ''
      },
      handleAvatarSuccess1(res, file){
            if(res.success){
                this.form.seriesPic1 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
        },
      handleAvatarSuccess2(res, file){
            if(res.success){
                this.form.seriesPic2 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
        },
      handleAvatarSuccess3(res, file){
            if(res.success){
                this.form.seriesPic3 = res.data.savePath
                this.$message({
                    type:'success',
                    message:'文件上传成功!'
                })
            }
        },
      beforeAvatarUpload(file) {
        // const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 1;

        // if (!isJPG) {
        //   this.$message.error('上传图片只能是 JPG 格式!');
        // }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!');
        }
        //isJPG && isLt2M
        return  isLt2M;
      },
      showAddModel(){
        this.modelTitle = '新增系列信息'
        this.form = {
          seriesPic1:'',
          seriesPic2:'',
          seriesPic3:'',
        }
        this.newbrand = true
        this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
      },
      showEditModel(){
        this.form = {
          seriesPic1:'',
          seriesPic2:'',
          seriesPic3:'',
        }
        if(this.currentEditRow != null && this.currentEditRow.id != null && this.currentEditRow.id > 0){
          this.modelTitle = '修改系列信息'
          this.form = Object.assign({},this.form,this.currentEditRow)
          if(this.form.lumType != null && this.form.lumType != ''){
            this.form.lumType = parseInt(this.form.lumType)
          }
          this.newbrand = true
          this.uploadUrl = this.$http.getSignUrl('/api/files/upload',{type:'image'})
        }else{
          this.$message.error("请先选择一条数据！")
        }
      },
      showDeleteModel(){
        var id = this.currentEditRow.id
        let self = this;
        if(this.currentEditRow != null && this.currentEditRow.id != null && this.currentEditRow.id > 0){
          this.$confirm('您确定要删除吗?','提示',{
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
          }).then(()=>{

            this.$http.deletePath("/api/series/" + id, {}, function(res) {
              if (res.success) {
                self.$message({
                  message: "删除成功！",
                  type: "success"
                });
              }else{
                self.$message.error(res.data)
              }
              self.search(1);
            });

          }).catch(()=>{});
        }else{
          this.$message.error("请先选择一条数据！")
        }
      },
      search(page){
            let self = this
            this.request.page = page
            this.$http.postObj('/api/series/pageJson',this.request,function(res){
                if(res.success){
                    self.tableData = res.data.rows
                    self.totalCount = res.data.total
                }
            })
      },
      save(){
        if(this.form.seriesName == null || this.form.seriesName == '' ){
          this.$message.error('请输入系列名称')
          return false;
        }
        if(this.form.brandId == null || this.form.brandId == ''){
          this.$message.error('请选择所属品牌')
          return false;
        }
        if(this.form.seriesPic1 == null || this.form.seriesPic1 == ''){
          this.$message.error('请上传宣传图1')
          return false;
        }
        
        let self = this;
        this.$http.postObj("/api/series", this.form, function(res) {
          if (res.success) {
            self.$message({
              message: "新增成功！",
              type: "success"
            });
            self.search(1);
            self.newbrand = false
          }else{
            self.$message.error(res.data)
          }
        });
      },
      edit(){
        if(this.form.seriesName == ''){
          this.$message.error('请输入系列名称')
          return false;
        }
        if(this.form.brandId == ''){
          this.$message.error('请选择所属品牌')
          return false;
        }
        if(this.form.seriesPic1 == null || this.form.seriesPic1 == ''){
          this.$message.error('请上传宣传图1')
          return false;
        }
        let self = this;
        this.$http.putObj("/api/series", this.form, function(res) {
          if (res.success) {
            self.$message({
              message: "修改成功！",
              type: "success"
            });
            self.search(1);
            self.newbrand = false
            self.currentEditRow = {}
          }else{
            self.$message.error(res.data)
          }
        });
      },
      handleCurrentChange(page) {
        this.search(page);
      },
      handleSizeChange(pageSize) {
        this.request.rows = pageSize;
        this.search(1);
      },
      loadBrand(){
            let self = this
            this.$http.postQuery('/api/brands/json',{isOrgState: true},function(res){
                if(res.success){
                    self.lampBrandList = res.data;
                }
            })
            this.$http.postObj('/api/series/pageJson',{page:1,rows:1000},function(res){
                if(res.success){
                    self.seriesList = res.data.rows;
                }
            })
            //加载灯具类型
            this.$http.get("/api/lampTypes/json", {}, function(res) {
                if (res.success) {
                    self.lampTypeList = res.data;
                }
            });
        },
    },
    created(){
      this.loadBrand()
      this.search(1)
    },
     components: {
        backHeader
     },
      mounted(){
        this.$nextTick(function () {
            this.tableHeight = window.innerHeight - 320;
            
            // 监听窗口大小变化
            let self = this;
            window.onresize = function() {
                self.tableHeight = window.innerHeight - 320
            }
        })
  }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
.el-dialog.newbrand.pop-up{
    width: 775px !important;
    .lt{
        width:300px;
        
    }
    .rt{
        width: 410px;
        .sce{
            width: 50% !important;
            float: left;
        }
        .avatar-uploader{
            img{
                max-width: 90px !important;
                max-height: 90px !important;
            }
        }
        .avatar-uploader-icon{
            width:90px;
            height: 90px;
            line-height: 90px;
        }
        .el-upload-list--picture-card.avatar-uploader{
          img{
            max-height: 90px;
            height: 90px !important;
            margin-bottom: 0 !important;
          }
        }
        .el-upload-list__item-actions{
           width:90px;
            height: 90px !important;
        }
    }
    .lt_rt{
        width: 100%;
        display: inline-block;
        .sce{
            width: 100%;
            float: left;
            
            .el-form-item__content{
                width: calc(100% - 87px);
            }
        }
    }
}
#wenzi{
    width: 142px;
    display: inline-block;
    overflow:hidden; 
display:-webkit-box; 
-webkit-box-orient:vertical; 
-webkit-line-clamp:3;
text-overflow:ellipsis;
  word-break: break-all;
}
.release{
 .witd{
     .el-form-item__content{
         width: 150px;
     }
     
 }
  .el-button--primary {
    background-color: #5b65a1;
    border-radius: 4px;
    border: none;
}
}
.managementProductList_btn{
  .remove{
    color: #d80000;
  }
}
.managementProductList{
  margin-top: 20px;
  text-align: right;
  li:last-child{
    float: right;
    margin-right: 0;
  }
}
.newbrand{
  .el-dialog__header{
    text-align: center;
    
  }
  .rt_lt{
     width: 100%;
        display: inline-block;
        .sce{
            width: 100%;
            float: left;
            
            .el-form-item__content{
                width: calc(100% - 87px);
            }
        }
  }
  .el-form-item{
    width: 100%;
    .el-form-item__content{
      width:calc(100% - 110px)
    }
  }
  .conr{
    overflow: hidden;
    .lt,.rt{
      width: 50%;
      float: left;
    }
  }
  .el-form{
    width: 100%;
    display: inline-block;
  }
  .el-form-item{
    margin-right: 0;
    &.botm{
      width: 100%;
    }
    .el-select{
      width: 185px;
    }
  }
  .botm{
    text-align: center;
    .el-button--primary{
      background-color: #5b65a1;
    border-radius: 4px;
    border: none;
    }
  }
}
.product{
    .searchBoxs{
      .el-button--primary{
            background-color: #5b65a1;
            border-radius: 4px;
            border: none;
      }
    }
   
}
.el-dialog__footer{
  text-align: center;
}
.avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 150px;
                height: 150px;
                line-height: 150px;
                text-align: center;
            }
            .avatar {
                width: 150px;
                height: 150px;
                display: block;
            } 
</style>
